<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11-isPointInStroke和isPointInPath</title>
    <style>
        canvas {
            display: block;
            border: 1px solid #eee;
        }
    </style>
</head>
<!-- canvas的点击事件: https://blog.csdn.net/youhebuke225/article/details/143884949 -->
<!-- canvas 刮刮卡 -->
<body>
<script type="text/javascript">
    // 1.创建canvas
    let canvas = document.createElement('canvas');

    canvas.addEventListener('click', handleNodeClick);
    canvas.width = 800
    canvas.height = 800
    document.body.append(canvas)

    // 2.获取content
    let context = canvas.getContext('2d')
    context.lineWidth = 5
    context.beginPath()
    context.rect(50, 50, 50, 50)
    context.stroke()

    function handleNodeClick(event) {
        // context.rect(50, 50, 50, 50);
        // context.lineWidth = 3
        // context.stroke()

        let {offsetX, offsetY} = event
        console.log('event--->', event)
        console.log(offsetX, offsetY)
        let isInStoke = context.isPointInStroke(offsetX, offsetY);
        let isInPath = context.isPointInPath(offsetX, offsetY);
        console.log('isInStoke--->', isInStoke)
        console.log('isInPath--->', isInPath)
    }

    // 创建圆形
    const circle = new Path2D();
    circle.arc(150, 75, 50, 0, 2 * Math.PI);
    context.fillStyle = "red";
    context.fill(circle);

    // 监听鼠标移动
    canvas.addEventListener("mousemove", (event) => {
        // 检查鼠标位置是否在圆形内
        const isPointInPath = context.isPointInPath(circle, event.offsetX, event.offsetY);
        context.fillStyle = isPointInPath ? "green" : "red";

        // 绘制圆形
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fill(circle);
    });

</script>
</body>

</html>